<template>
	<view class="baba">
		<mainswiper :background="background"/>
		<view class="show">
			<view class="io">
				<i class="iconfont icon-xiuxiankafeiyule"></i>
				<view>省心</view>
			</view>
			<view class="io">
				<i class="iconfont icon-zuanshi"></i>
				<view>品质</view>
			</view>
			<view class="io">
				<i class="iconfont icon-mimayaochi"></i>
				<view>私密</view>
			</view>
			<view class="io">
				<i class="iconfont icon-huiyuanzhuanxiang"></i>
				<view>专享</view>
			</view>
		</view>
		<view class="dd"></view>
		<view class="tui">推荐 <i class="iconfont icon-xia"></i></view>
		<view class="list" v-for="(item,index) in list" :key="index" >
			<view class="v1">
				<view class="zan"><i class="iconfont icon-shoucang2"></i> {{item.collectionNum}}</view>
				<image class="v1_img" :src="item.proPicUrl"></image>
				<view class="v1_text">
					<view class="title">{{item.proTitle}}</view>
					<view>
						<view class="didian"><i class="iconfont icon-didian"></i> {{item.country}}</view>
					</view>
					<view class="shijian">
						<text class="t1 iconfont icon-shijian"> {{item.routingDat}}天{{item.routingNigth}}晚</text>
						<text class="t2 iconfont icon-jiaqian"> {{item.amount}}元起</text>
					</view>
				</view>
			</view>
		</view>
		<view class="dd"></view>

		<!-- 轮播中间 -->
		<view class="mid-swiper-title">
			<view>
				<view class="title1">招募活动</view>
				<view class="title_shi">旅途中，邂逅TA，邂逅世界的美</view>
			</view>
			<view><text class="title_num">{{swiperIndex+1}} </text>/{{listLength}}</view>
		</view>

		<swiper :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular"
			class="swiper-mid" indicator-active-color="#4eddf9" previous-margin="10px" next-margin="20px"
			@change="changeSwiper">
			<block v-for="(item,index) in midSwiperList" :key="index">
				<swiper-item>
					<image :src="item.pro_pic_url"></image>
					<view class="swiper-text1">
						<text>{{item.pro_title}}</text>
						<text class="iconfont icon-didian add"> {{item.country}}</text>
					</view>
					<view class="swiper-text2">
						<text class="iconfont icon-shijian"> {{item.routing_data}}天{{item.routing_nigth}}晚</text>
						<text class="iconfont icon-jiaqian"> {{item.amount}}元起</text>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<view class="buyon">
			<text class="iconfont icon-shenqingchenggonggougouicon">不用懂外语</text>
			<text class="iconfont icon-shenqingchenggonggougouicon">不用懂攻略</text>
			<text class="iconfont icon-shenqingchenggonggougouicon">没有购物坑</text>
			<text class="iconfont icon-shenqingchenggonggougouicon">不用折腾自己</text>
		</view>

		<view class="dd"></view>
		<view class="tui">猜你喜欢 <i class="iconfont icon-xia"></i></view>

		<view class="lala">
			<view class="love" v-for="(item,index) in love" :key="index">
				<view class="aixin"><i class="iconfont icon-shoucang2"></i> {{item.collectionNum}}</view>
				<image :src="item.proPicUrl"></image>
				<view class="jieshao">{{item.proTitle}}</view>
				<view class="address"><i class="iconfont icon-didian"></i> {{item.country}}</view>
				<view class="time">
					<view><i class="iconfont icon-shijian"></i> {{item.routingDat}}天{{item.routingNigth}}晚</view>
					<view class="t1"><i class="iconfont icon-jiaqian"></i> {{item.amount}}元起</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mainswiper from '../../components/main/mainswiper.vue'
	import http from '../../utils/http.js'
	export default {
		data() {
			return {
				love: [],
				list: [],
				background: [],
				indicatorDots: true, //轮播是否有小圆点
				vertical: false, //false 横向   true 纵向
				autoplay: true, //自动播放
				interval: 2000, //动画时间
				duration: 500, //间隔时间
				circular: true, //衔接动画
				midSwiperList: [], //中间
				swiperIndex: 0, //中间的swiper的下标
				listLength: 0
			}
		},
		components:{
			mainswiper,
		},
		onLoad() {
			//获取头部数据
			http.request("product/banner/getBySeller/4bc4027c645343f09a964b5c2e9f875b", "", "get").then(res => {
				console.log(res);
				this.swiperList = res.data
			})
			//中间轮播
			http.request("requirement/request/getMatchedProducts", {
				desc: false,
				orderBy: "outtime",
				pageSize: 100,
				product_type: 2
			}, "post").then(res => {
			 console.log(11, res);
				this.midSwiperList = res.data.matchedProducts;
				this.listLength = res.data.matchedProducts.length
			})
			//顶部轮播
			http.request('/product/banner/getBySeller/4bc4027c645343f09a964b5c2e9f875b',
				'', 'get').then(res => {
				this.background = res.data
			});
			//推荐
			http.request('/product/product/getProductRecommendUser', {
				desc: false,
				orderBy: "top",
				pageNow: 1,
				pageSize: 20,
				seller_user_id: "4bc4027c645343f09a964b5c2e9f875b"
			}, 'post').then(res => {
				this.list = res.data
			});
			//猜你喜欢
			http.request('/product/product/guessYouLike', '', 'get').then(res => {
				this.love = res.data
			});

		},
		methods: {
			//跳转内容页，并传参
			goItem(ev) {
				console.log(ev);
				const id = ev.currentTarget.dataset.index;
				//跳转内容页并传参
				uni.navigateTo({
					url: '/pages/item/item?id=' + id,
				})
			},
			//获取当前轮播图下标
			changeSwiper(ev) {
				this.swiperIndex=ev.detail.current
			},
		}
	}
</script>

<style>
	.baba {
		overflow-x: hidden;
	}

	.swiper-con {
		width: 750rpx;
		height: 372rpx;
	}

	.swiper-con image {
		width: 750rpx;
		height: 372rpx;
	}

	.swiper-con .wx-swiper-dot-active {
		background: #4eddf9;
		width: 24rpx;
		border-radius: 36%;
	}

	.show {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80px;
		color: #ebd4b4;
		font-size: 13px;
	}

	.show .io {
		text-align: center;
	}

	.show .io view {
		margin-top: 5px;
	}

	.show i {
		font-size: 30px;
	}

	.dd {
		height: 10px;
		background: #f2f2f2;
	}

	.tui {
		color: #a7a7a7;
		text-align: center;
		height: 50px;
		line-height: 50px;
		border-bottom: #c4c4c4 1px solid;
	}

	/* 推荐 */
	.list {
		border-bottom: 1px dashed #d5d5d5;
		font-size: 12px;
	}

	.list .v1 .v1_text i {
		font-size: 12px;
	}

	.v1 {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 5px;
		position: relative;
	}

	.v1 .zan {
		position: absolute;
		display: inline-block;
		color: white;
		top: 75px;
		left: 110px;
		z-index: 5;
		font-size: 16px;
	}
	.v1 .zan i{
		font-size: 16px;
		margin-right: 5px;
	}

	.v1 .title {
		font-weight: bold;
		font-size: 15px;
	}

	.v1_img {
		width: 150px;
		height: 100px;
	}

	.v1_text {
		width: 60%;
		display: flex;
		flex-direction: column;
		margin-left: 10px;
		justify-content: space-around;
	}

	.v1_text .didian {
		display: inline-block;
		background: #e9e9e9;
		border-radius: 5px;
		padding: 5px;
	}

	.v1_text .didian i {
		color: #666666;
	}

	.v1_text .shijian text {
		font-size: 12px;
		color: #858585;
	}

	.v1_text .t2 {
		margin-left: 20px;
	}

	/* 猜你喜欢 */
	.lala {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.love {
		width: 44%;
		border: solid 1px red;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 12px;
		box-shadow: 5px 5px 0 2px #f2f2f2;
		border: 1px solid #f8f8f8;
		position: relative;
	}

	.love .aixin {
		position: absolute;
		display: inline-block;
		color: white;
		top: 75px;
		left: 100px;
	}

	.love .aixin i {
		color: white;
		font-size: 12px;
	}

	.love image {
		width: 140px;
		height: 100px;
	}

	.love .jieshao {
		margin: 5px 0;
		text-align: right;
	}

	.love .address {
		background: #e9e9e9;
		display: inline-block;
		border-radius: 5px;
		padding: 5px;
		margin-bottom: 5px;
		margin-left: 5px;
	}

	.love .address i {
		font-size: 12px;
		color: #666666;
	}

	.love .time {
		margin-bottom: 5px;
		margin-left: 5px;
		color: #858585;
	}

	.love .time view {
		display: inline-block;
	}

	.love .time view i {
		font-size: 12px;
	}

	.love .time .t1 {
		margin-left: 10px;
	}

	/* 中间轮播图 */
	.mid-swiper-title {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 75px;
	}

	.mid-swiper-title .title1 {
		font-size: 18px;
	}

	.mid-swiper-title .title_shi {
		font-size: 13px;
		color: #a6a6a6;
	}

	.mid-swiper-title .title_num {
		font-size: 18px;
	}

	.swiper-mid {
		width: 750rpx;
		height: 500rpx;
		border: 2px solid #d8d8d8;
	}

	.swiper-mid image {
		width: 750rpx;
		height: 372rpx;
		margin-left: 20rpx;
		margin-right: 0px;
	}

	.swiper-text1 .add {
		background: #e9e9e9;
		display: inline-block;
		border-radius: 5px;
		font-size: 12px;
		color: #666666;
		padding: 5px;
		margin-left: 20px;
	}

	.swiper-text1,
	.swiper-text2 {
		padding-left: 50rpx;
		font-size: 12px;
	}

	.swiper-text2 text {
		font-size: 12px;
	}

	.swiper-text2 {
		color: #ccc;
		margin-top: 20rpx;
	}

	.swiper-text2 text:nth-of-type(2) {
		margin-left: 100rpx;
	}

	.buyon text {
		font-size: 12px;
		color: #333333;
	}

	.buyon {
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
</style>
